import BootstrapIcon from "@lib/BootstrapIcon";
import BsButton from "@lib/Button";
import type { RouteDefinition } from "@solidjs/router";
import { createSignal } from "solid-js";

const ButtonDemo = () => {
  const [loading, setLoading] = createSignal(false);

  const toggleLoading = () => setLoading((v) => !v);

  return (
    <div>
      <div class="d-flex grid gap-3">
        <BsButton variant="primary">Primary</BsButton>
        <BsButton variant="secondary">Secondary</BsButton>
        <BsButton variant="success">Success</BsButton>
        <BsButton variant="danger">Danger</BsButton>
        <BsButton variant="warning">Warning</BsButton>
        <BsButton variant="info">Info</BsButton>
        <BsButton variant="light">Light</BsButton>
        <BsButton variant="dark">Dark</BsButton>
      </div>
      <hr></hr>
      <div class="d-flex grid gap-3">
        <BsButton outline variant="primary">
          Primary
        </BsButton>
        <BsButton outline variant="secondary">
          Secondary
        </BsButton>
        <BsButton outline variant="success">
          Success
        </BsButton>
        <BsButton outline variant="danger">
          Danger
        </BsButton>
        <BsButton outline variant="warning">
          Warning
        </BsButton>
        <BsButton outline variant="info">
          Info
        </BsButton>
        <BsButton outline variant="light">
          Light
        </BsButton>
        <BsButton outline variant="dark">
          Dark
        </BsButton>
      </div>
      <hr></hr>
      <div class="d-flex grid gap-3">
        <BsButton outline size="sm" variant="primary">
          Primary
        </BsButton>
        <BsButton outline size="sm" variant="secondary">
          Secondary
        </BsButton>
        <BsButton outline size="sm" variant="success">
          Success
        </BsButton>
        <BsButton outline size="sm" variant="danger">
          Danger
        </BsButton>
        <BsButton outline size="sm" variant="warning">
          Warning
        </BsButton>
        <BsButton outline size="sm" variant="info">
          Info
        </BsButton>
        <BsButton outline size="sm" variant="light">
          Light
        </BsButton>
        <BsButton outline size="sm" variant="dark">
          Dark
        </BsButton>
      </div>
      <hr></hr>
      <div class="d-flex grid gap-3">
        <BsButton outline size="lg" variant="primary" loading={loading()}>
          Primary
        </BsButton>
        <BsButton outline size="lg" variant="secondary" loading={loading()}>
          Secondary
        </BsButton>
        <BsButton outline size="lg" variant="success">
          Success
        </BsButton>
        <BsButton
          outline
          size="lg"
          variant="danger"
          icon={<BootstrapIcon icon="pen"></BootstrapIcon>}
          loading={loading()}
        >
          Danger
        </BsButton>
        <BsButton
          outline
          size="lg"
          variant="warning"
          icon={<BootstrapIcon icon="pen"></BootstrapIcon>}
          loading={loading()}
        >
          Warning
        </BsButton>
        <BsButton outline size="lg" variant="info">
          Info
        </BsButton>
        <BsButton outline size="lg" variant="light">
          Light
        </BsButton>
        <BsButton outline size="lg" variant="dark">
          Dark
        </BsButton>
      </div>
      <hr></hr>
      <div class="d-flex grid gap-3">
        <BsButton onClick={toggleLoading}>Toggle</BsButton>
        <BsButton
          variant="primary"
          loading={loading()}
          icon={<BootstrapIcon icon="search"></BootstrapIcon>}
        >
          Dark
        </BsButton>
      </div>
      <hr></hr>
      <div class="d-flex grid gap-3">
        <BsButton
          icon={<BootstrapIcon icon="search"></BootstrapIcon>}
          variant="primary"
          loading={loading()}
        >
          Dark
        </BsButton>

        <BsButton
          icon={<BootstrapIcon icon="pen"></BootstrapIcon>}
          variant="primary"
          loading={loading()}
        ></BsButton>
      </div>
    </div>
  );
};

export const ButtonDemoRoute: RouteDefinition = {
  path: "/button",
  component: ButtonDemo,
};

export default ButtonDemoRoute;
